<template>
    <div>
      <el-card class="box-card center-card" style="margin-top:20px">
        <div class="text item">

          <el-form class="import" ref="queryForm" :model="queryParams" :rules="rules" label-width="0" style="width: 230px;margin: 0 auto;">
            <el-form-item label="" prop="relationSubjectId">
              <el-select v-model="queryParams.relationSubjectId"
                         placeholder="请选择科目"
                         clearable>
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <div style="padding: 20px 0;">
            <i class="el-icon-bottom"></i>
          </div>

          <el-upload
            class="upload-demo"
            ref="upload"
            :limit="1"
            accept=".xlsx"
            :headers="upload.headers"
            :action="upload.url+importStatus+queryParams.relationSubjectId"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
          >
            <el-button :loading="loading" slot="trigger" type="primary" class="center-btn" @click="importData">上传表格</el-button>
            <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xlsx”格式文件！</div>
          </el-upload>

          <div style="padding: 20px 0;">
            <i class="el-icon-bottom"></i>
          </div>

          <el-button
            type="primary"
            :loading="checkLoading"
            class="center-btn"
            @click="checkImport"
          >核验导入
          </el-button>
        </div>
      </el-card>
    </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { getCalculateScoreList, subjectiveQuestionsInsert } from "@/api/toolsystem/grade";
  import Cookies from "js-cookie";
  export default {
    name: "importData",
    data(){
      return{
        // 查询参数
        queryParams: {
          relationSubjectId: null, // 学科id
        },
        rules: {
          relationSubjectId: [
            {
              required: true,
              message: "请选择科目",
              trigger: "blur"
            }
          ],
        },
        subjectList: [], // 科目数据数组
        loading: false, // 上传表格loading
        // 上传表格参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/after-exam-score/importScoreExcel/"
        },
        type: 0, // 0-标考，1-校招
        importStatus: 'biaokao/',
        checkLoading: false// 核验导入loading
      }
    },
    created() {
      this.getSubjectList()
      const type = Cookies.get("tool_system_grade_selectExam")
      if(type==1){
        this.importStatus = "xiaozhao/"
      }else if(type==2){
        this.importStatus = "biaokao/"
      }
    },
    methods:{
      // 核验导入
      checkImport(){
        this.checkLoading = true;
        subjectiveQuestionsInsert(this.importStatus)
          .then(response => {
            console.log(response)
            if (response.code != 200) {
              this.checkLoading = false;
              return this.msgError(response.msg);
            }
            this.checkLoading = false;
            this.msgSuccess(response.msg);
          })
          .catch(error => {
            this.checkLoading = false;
            console.log(error);
          });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.loading = true;
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.isUploading = false;
        this.loading = false;
        this.$refs.upload.clearFiles();
        this.msgSuccess(response.msg);
      },
      // 上传表格
      importData(){
        this.$refs["queryForm"].validate(valid => {
          if (!valid) return this.upload.isUploading = true;
          this.upload.isUploading = false;
        })
      },
      // 获取科目列表
      getSubjectList() {
        getCalculateScoreList()
          .then(response => {
            if (response.code != 200) {
              return;
            }
            let dataList = response.data
            dataList.forEach(item=>{
              let obj = {
                text: item['name'],
                value: item['relationSubjectId']
              }
              this.subjectList.push(obj)
            })
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-form.import{
    .el-form-item {
       &:nth-child(1){
         margin-bottom: 0;
       }
    }
  }
</style>
